<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/*外边距margin属性：【微调：文字或者图片】
			 margin使用问题1： 自适应居中 ，建议使用div，套块元素，行块元素，行内元素
				使用问题2：行元素 上下外边距失效 左右边距
						行元素：不可以设置高宽【高---不可以
							使用问题3：垂直外边距
							使用问题4：垂直外边距
			 */
			img{
				border: 1px solid red;
				/*margin：1个属性值 顺时针 ： 上 右 下 左*/
				margin:200px;
				/* margin: 2个属性值 顺时针 ：上下 右左*/
				margin:10px 200px;
				/*常用：盒子自适应居中 --- 失败
						margin使用问题1：自适用居中，必须设置宽度
				*/
				margin:0 auto;
				/* margin: 3个属性值 顺时针 ：上 右左 下*/
				margin:100px 200px 300px;
				/* margin:100px 200px 300px;margin: 3个属性值 顺时针 ：上 右左 下*/
				margin:100px 200px 300px 400px;
			}
			h1{
				/*常用 盒子自适应居中 ---*/
				width:100%
				border:1px solid red;
				text-align: center;
			}
				
			span{
				/*行元素 ：不可以设置高宽，在一行显示 ，无法居中，内置文本
					text-aligin:center
				 ---*/
				 /*常用：盒子自适应居中*/
					width:100%
					border:1px solid red;
					text-align: 100px 200px ;
			}
				
			div{
				width: 200px;
				height:200px;
				background:red;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!-- 框模型，盒子模型 ：四个组成部分
						      外边距：边框以外四周，叫做外边距
							  margin属性
							  边框： --
							  内边距 边框以内 与内容 之间距离，叫做内边距
							  内容：块，行，
		所有元素存在于框模型中-->
		<h1>块级元素</h1>
		<img src= "img/圣诞.png" width="300px"height="300px" alt="圣诞">
	<span>行内元素：圣诞</span>
	</body>
	
</html>